<template>
  <view class="categoryList">
    <scroll-view scroll-x="true" class="head" :scroll-left="scrollLeft">
      <view @click="changeTab(index, item.id)" v-for="(item, index) in navData" :key="index" :class="[nowIndex == index ? 'active' : '']">
        {{item.name}}
      </view>
    </scroll-view>
    <view class="info">
      <view>{{currentNav.name}}</view>
      <view>{{currentNav.front_desc}}</view>
    </view>
    <view class="list" v-if="goodsList.length !== 0">
      <view class="item" v-for="(item, index) in goodsList" :key="index" @click="goodsDetail(item.id)">
        <image :src="item.list_pic_url" alt="">
        <view class="name">{{item.name}}</view>
        <view class="price">¥ {{item.retail_price}}</view>
      </view>
    </view>
    <view class="none" v-else>数据库暂无数据...</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				scrollLeft: 0,
				navData: [],
				categoryId: '',
				currentNav: {},
				nowIndex: 0,
				goodsList: []
			}
		},
		onLoad(option) {
			this.categoryId = option.id
			this.getAllData()
		},
		methods: {
			goodsDetail(id){
				uni.navigateTo({
					url:'/pages/goods/goods?id=' + id
				})
			},
			async changeTab(index,id){
				this.nowIndex = index
				const listData = await this.$request({
					url:'/goods/goodsList',
					data:{
						categoryId:id
					}
				})
				this.goodsList = listData.data.data		
				this.currentNav = listData.data.currentNav
				if(this.nowIndex > 4){
					this.scrollLeft = this.nowIndex * 60
				}else{
					this.scrollLeft = 0
				}
			},
			async getAllData(){
				const data = await this.$request({
					url:'/category/categoryNav',
					data:{
						id:this.categoryId
					}
				})
				this.navData = data.data.navData
				this.currentNav = data.data.currentNav
				for(let i = 0; i < this.navData.length; i++){
					const id = this.navData[i].id
					if(id == this.currentNav.id){
						this.nowIndex = i
					}
				}
				const listData = await this.$request({
					url:"/goods/goodsList",
					data:{
						categoryId:this.categoryId
					}
				})
				this.goodsList = listData.data.data
				if(this.nowIndex > 4){
					this.scrollLeft = this.nowIndex * 60
				}else{
					this.scrollLeft = 0
				}
			}		
		}
	}
</script>

<style lang="scss">
.categoryList {
  width: 100%;
	background-color: #eee;
  .head {
    width: 100%;
    height: 84rpx;
    line-height: 84rpx;
    background: #fff;
    white-space: nowrap;
    view {
      display: inline-block;
      padding: 0 20rpx;
      margin-left: 20rpx;
    }
    .active {
      color: #ab2b2b;
      height: 100%;
      border-bottom: 2px solid #ab2b2b;
      box-sizing: border-box;
    }
  }
  .info {
    text-align: center;
    background: #fff;
    padding: 30rpx;
    margin-top: 20rpx;
    margin-bottom: 5rpx;
    view:nth-child(1) {
      margin-bottom: 18rpx;
      font-size: 30rpx;
      color: #333;
    }
    view:nth-child(2) {
      display: block;
      height: 24rpx;
      font-size: 24rpx;
      color: #999;
    }
  }
  .list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
      width: 372.5rpx;
      margin-bottom: 5rpx;
      text-align: center;
      background: #fff;
      padding: 15rpx 0;
      image {
        display: block;
        width: 302rpx;
        height: 302rpx;
        margin: 0 auto;
      }
      .name {
        margin: 15rpx 0 22rpx 0;
        text-align: center;
        padding: 0 20rpx;
        font-size: 24rpx;
      }
      .price {
        text-align: center;
        font-size: 30rpx;
        color: #b4282d;
      }
    }
  }
  .none {
    text-align: center;
    margin-top: 100rpx;
    color: #999;
  }
}
</style>
